// 我的评论页面

import './index.less';
import {Text, View} from "@tarojs/components";
import {useEffect, useState} from "react";
import {Api} from "../../api/api";
import {wxActions} from "../../utils/wxActions";
import {CommentItem} from "../../components/CommentItem";
import {useReachBottom} from "@tarojs/taro";
import Taro from "@tarojs/taro";
import {connect} from "react-redux";

function MyComment(props) {
    const {reduxUserInfo} = props;
    const [commentList, setCommentList] = useState([]); // 评论列表
    const [pageIndex, setPageIndex] = useState(1); // 页码
    const [total, setTotal] = useState(0); // 总数

    useEffect(() => {
        Api.getMyComment({
            pageSize: 10,
            pageNum: 1
        }).then(res => {
            setCommentList(res.rows);
            setTotal(res.total);
        }).catch((err) => {
            // wxActions.showTip(err.message);
        });
    }, []);

    // 评论删除事件
    const commentRemove = (id) => {
        Api.delComment(id).then(res => {
            let newCommentList = commentList.map(item => {
                item.commentList = item.commentList.filter(commentItem => commentItem.id !== id);
                // 如果删除后，该成果下没有评论了，则删除该成果
                if (item.commentList.length === 0) {
                    return null;
                }
                return item;
            });
            // 过滤掉空的成果
            newCommentList = newCommentList.filter(item => item !== null);
            setCommentList(newCommentList);
            wxActions.showSuccess("删除成功")
        })
    }

    // 下触底事件
    useReachBottom(() => {
        if (pageIndex * 10 >= total) {
            return;
        }
        wxActions.showLoading('加载中');
        Api.getMyComment({
            pageSize: 10,
            pageNum: pageIndex + 1
        }).then(res => {
            setCommentList([...commentList, ...res.rows]);
            setPageIndex(pageIndex + 1);
        }).finally(() => {
            Taro.hideLoading();
        });
    });

    const commentByPro = (item) => {
        return <View className={"commentByPro"}>
            <View className={"pro_name"}>
                <Text>{item.proName}</Text>
            </View>
            {
                item.commentList.map((commentItem, index) =>
                    <CommentItem
                        key={index}
                        isSelf={true}
                        commentObj={commentItem}
                        commentRemove={commentRemove}
                        myName={reduxUserInfo?.nickName}
                        selfAvatar={reduxUserInfo?.avatar}
                    />
                )
            }
        </View>
    }

    return (
        <View className='myComment'>
            <View className={"myCommentList"}>
                {
                    commentList.map((item, index) => {
                        return commentByPro(item);
                    })
                }
            </View>
        </View>
    )
}

const mapStateToProps = (state) => ({
    reduxUserInfo: state.userState.reduxUserInfo
})

export default connect(mapStateToProps)(MyComment);
